<template>
    <div class="versions">
        <template v-if="isUpdate">
            <Form
                ref="formInline"
                :label-width="80"
                :model="formData"
                :rules="customRules">
                <FormItem prop="version" label="版本号">
                    <Input clearable v-model="formData.version" />
                </FormItem>
                <FormItem prop="description" label="版本说明">
                    <Input type="textarea" v-model="formData.description" :rows="4" />
                </FormItem>
            </Form>
            <div>
                <Button style="margin-left: 80px;" @click="updateData" :loading="loading"  type="primary">确定</Button>
                <Button style="margin-left: 9px;" @click="isUpdate = false">取消</Button>
            </div>
        </template>
        <template v-else>
            <p class="text"><span class="label1">产品名称:</span><span class="label2">{{ productInfo.name }}</span></p>
            <p class="text"><span class="label1">版本号:</span><span class="label2">{{ productInfo.version }}</span></p>
            <p class="text"><span class="label1">版本说明:</span><span class="label2">{{ productInfo.description }}</span></p>
            <p class="text"><span class="label1">创建人:</span><span class="label2">{{ productInfo.creatorName }}</span></p>
            <p class="text" style="margin-bottom: 10px;"><span class="label1">创建时间:</span><span class="label2">{{ productInfo.created }}</span></p>
            <Button
                type="primary"
                ghost
                style="height: 32px;margin-left: 80px;"
                @click="showUpdate">修改
            </Button>
            <Poptip
                confirm
                title="确定要删除吗"
                transfer
                @on-ok="deleteData"
                :disabled="disabledDelete"
                style="margin-left: 9px;">
                <Button
                    type="error"
                    ghost
                    :disabled="disabledDelete">删除
                </Button>
            </Poptip>
        </template>
    </div>
</template>

<script>
import { updateProduct, deleteProduct, whetherDelVersion } from '@/view/testPlatform/asset/api/asset'

export default {
    name: 'Versions',
    props: {
        productInfo:{
            type:Object,
            default: ()=>{}
        },
    },
    data() {
        return {
            disabledDelete: true,
            loading: false,
            isUpdate: false,
            formData: {},
            customRules: {
                version: [
                    { required: true, message: `版本号不能为空`, trigger: 'blur,change' }
                ]
            }
        }
    },
    mounted() {
        this.allowDelete()
    },
    methods: {
        showUpdate() {
            this.formData = Object.assign({}, this.productInfo)
            this.isUpdate = true
        },
        updateData() {
            this.$refs.formInline.validate(valid => {
                if (valid) {
                    this.loading = true
                    updateProduct(this.formData).then(({ code, message }) => {
                        if (code !== 1) {
                            this.$Message.warning(message)
                            return
                        }
                        this.$Message.success('修改成功')
                        this.productInfo = Object.assign({}, this.formData)
                        this.isUpdate = false
                        this.$emit('update-success')
                    }).finally(() => {
                        this.$nextTick(() => {
                            this.loading = false
                        })
                    })
                }
            })
        },
        deleteData() {
            deleteProduct(this.productInfo.id).then(({ code, message }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.$Message.success('删除成功')
                this.$emit('delete-success')
            })
        },
        allowDelete() {
            whetherDelVersion(this.productInfo.id).then(({ code, message, data }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                // 返回值false不能删除，与页面禁用逻辑正好相反，所以取反一下
                this.disabledDelete = !data
            })
        },
    }
}
</script>

<style scoped>
.versions {
    width: 500px;
}
.text {
    line-height: 2;
    display: flex;
}
.label1,
.label2 {
    display: inline-block;
}
.label1 {
    width: 68px;
    text-align: right;
    margin-right: 12px;
}
.label2 {
    width: calc(100% - 80px);
    word-break: break-word;
}
</style>